<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-form-item label="订单编号">
          <el-input
            v-model="param.order_code"
            placeholder="请输入订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="param.mobile"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="param.status"
            placeholder="请选择订单状态"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应结算时间">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="settleTime"
            @change="getSettleTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operator-btn" v-if="roleType == 2">
      <!-- <el-button type="danger" @click="remit()">批量打款</el-button> -->
      <!-- <el-button type="warning" @click="orderExport()">订单导出</el-button> -->
    </div>
    <el-table
      :data="dataList"
      ref="multipleTable"
      v-loading="tableLoading"
      row-key="Id"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectable"
      ></el-table-column>
      <el-table-column align="center" label="商品信息" min-width="145">
        <template slot-scope="scope">
          <div class="flex_y_center">
            <div>
              <img :src="scope.row.goods_img" class="table-img" />
            </div>
            <div class="table-info">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.goods_title"
                placement="top"
              >
                <div class="title">{{ scope.row.goods_title }}</div>
              </el-tooltip>

              <div class="flex_bet">
                <span>{{ scope.row.sku_set_name }} </span>
                <span>x{{ scope.row.number }} </span>
              </div>
              <div>
                <span class="price">{{ scope.row.real_price }}</span> 元
                <!-- <del>{{ scope.row.sale_price }}</del> -->
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="total_reduced"
        label="促销优惠"
        width="105"
      ></el-table-column>
      <!-- <el-table-column align="center" label="商品类型" width="105">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.proxy_goods ==true">代销商品</el-tag>
          <el-tag v-if="scope.row.proxy_goods ==false">非代销商品</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column width="255" align="center" label="订单信息">
        <template slot-scope="scope">
          <div>订单状态：{{ scope.row.order_status }}</div>
          <div>应结算时间：{{ scope.row.should_settlement_time || '-' }}</div>
          <div>订单号码：{{ scope.row.order_code }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分佣人信息">
        <template slot-scope="scope">
          {{ scope.row.distribution_user_role_name }}
          <div>{{ scope.row.distribution_user_mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="consumption_value"
        label="商品贡献值"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.consumption_value }}
          <span v-if="scope.row.number"> x {{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分佣金额" width="200">
        <template slot-scope="scope">
          <div>分润初始值：{{ scope.row.gains }}</div>
          <div>售后影响值：{{ scope.row.refund_deduct }}</div>
          <div>分润最终值：{{ scope.row.able_gains }}</div>
          <div>订单金额分润值：{{ scope.row.balance_gains }} 元</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分佣明细" width="188">
        <template slot-scope="scope">
          <!-- <div>分佣算法：{{changeType(scope.row.distribution_computer)}}</div> -->
          <div>算法：{{ scope.row.env_remark }}</div>
          <!-- <div></div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="入账账户信息" width="199">
        <template slot-scope="scope">
          <div v-if="scope.row.user_bank_card && !(scope.row.distribution_computer==0 || scope.row.distribution_computer==4)">
            <div>{{scope.row.user_bank_card.bank_name}}</div>
            <div>{{scope.row.user_bank_card.card_num}}</div>
            <div>{{scope.row.user_bank_card.name}}</div>
            <div>{{scope.row.user_bank_card.mobile}}</div>
          </div>
          <div v-if="scope.row.distribution_computer==0 || scope.row.distribution_computer==4">
            <div>结算后会转入会员佣金</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.able_settlement&&!scope.row.settlement" type="text" disabled>打款</el-button>
          <el-button v-if="scope.row.settlement" type="text" @click="view(scope.row)">查看</el-button>
          <el-button v-if="scope.row.able_settlement && !scope.row.settlement&&roleType==2" type="text" @click="remit(scope.row)">打款</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="param.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="param.limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 打款 -->
    <el-dialog title="打款" :visible.sync="remitVisible" width="35%">
      <el-form
        :model="remitParam"
        :rules="remitRules"
        ref="remitParam"
        :disabled="dialogType == 'view'"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item>
          <div>
            共<label class="num">{{ currUserInfo.num }}</label
            >笔款，打款金额：<label class="price">{{
              currUserInfo.total
            }}</label>
          </div>
        </el-form-item>
        <div class="flex_bet">
          <el-form-item label="银行" class="w-50">
            <el-input v-model="currUserInfo.bank_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="卡号" class="w-50">
            <el-input v-model="currUserInfo.card_num" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex_bet">
          <el-form-item label="姓名" class="w-50">
            <el-input v-model="currUserInfo.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" class="w-50">
            <el-input v-model="currUserInfo.mobile" disabled></el-input>
          </el-form-item>
        </div>
        <el-form-item label="打款备注" prop="remark">
          <el-input
            type="textarea"
            v-model="remitParam.remark"
            placeholder="请输入打款备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="dialogType != 'view'">
        <el-button @click="remitVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="remitLoading"
          @click="remitSubmit('remitParam')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import serviceApione from '@/api/serviceApione.js'
import config from '../../../../appConfig.js'
export default {
  data() {
    return {
      dataList: [],
      total: null,
      param: {
        page: 1,
        limit: 10,
        mobile: '',
        order_code: '',
        status: null,
        start_date: '',
        end_date: ''
      },
      settleTime: [],
      options: [
        {
          label: '未完成',
          value: 1
        },
        {
          label: '已完成(未结算)',
          value: 2
        },
        {
          label: '已结算',
          value: 3
        }
      ],
      tableLoading: false,

      /* 打款弹窗 */
      remitVisible: false,
      remitParam: {
        // 提交数据
        ids: [],
        remark: ''
      },
      currUserInfo: {},
      remitRules: {
        remark: [
          {
            required: true,
            message: '请输入打款备注',
            trigger: 'blur'
          }
        ]
      },
      currUser: '',
      remitLoading: false,
      /* 查看 */
      dialogType: ''
    }
  },
  mounted() {
    this.loadList()
  },
  computed: {
    roleType: {
      get() {
        return this.$store.state.user.roleType
      }
    }
  },
  methods: {
    loadList() {
      this.tableLoading = true
      serviceApione
        .getUserordergainsList(this.param)
        .then(res => {
          if (res.data && res.data.code == 200) {
            this.dataList = res.data.page.list
            this.total = res.data.page.totalCount
          }
          this.tableLoading = false
        })
        .then(res => {
          this.tableLoading = false
        })
    },
    currentChangeHandle(e) {
      this.param.page = e
      this.loadList()
    },
    sizeChangeHandle(e) {
      this.param.page = 1
      this.param.limit = e
      this.loadList()
    },

    selectable(e) {
      if (e.able_settlement && !e.settlement) {
        return true
      } else {
        return false
      }
    },
    // 多选
    handleSelectionChange(e) {
      e.map((item, i) => {
        if (i == 0) {
          this.currUserInfo = item.user_bank_card || {}
          if (Object.keys(this.currUserInfo).length) {
            this.currUserInfo.num = e.length
            this.currUserInfo.total = 0
          }
        }
        if (this.currUser) {
          if (this.currUser != item.distribution_user_mobile) {
            this.$message.error('只能选择一个分润人进行操作')
            this.remitParam.ids = []
            this.$refs.multipleTable.toggleRowSelection(item, false)
            return false
          }
        }
        this.currUser = item.distribution_user_mobile
        if (Object.keys(this.currUserInfo).length) {
          this.currUserInfo.total += item.able_gains
        }
        this.remitParam.ids.push(item.id)
      })
    },

    /**
     * 查询
     * */
    search() {
      this.param.page = 1
      this.loadList()
    },

    // 打款 弹窗
    remit(row) {
      console.log(row)
      if (row) {
        // 重置提交数据
        this.remitParam = {
          ids: [],
          remark: ''
        }
        this.currUserInfo = {}
        // 单选的
        this.currUserInfo = row.user_bank_card || {}
        this.remitParam.ids.push(row.id)
        if (Object.keys(this.currUserInfo).length) {
          this.currUserInfo.num = 1
          this.currUserInfo.total = row.able_gains
        }
      } else {
        // 多选的
        if (!this.remitParam.ids.length) {
          this.$message.warning('请至少选择一行进行操作！')
          return
        }
      }
      if (!Object.keys(this.currUserInfo).length) {
        this.$message.warning('没有入账账户信息，无法打款！')
      } else {
        this.remitVisible = true
      }
    },

    // 确认打款
    remitSubmit(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          this.remitLoading = true
          serviceApione
            .settle(this.remitParam)
            .then(res => {
              if (res.data && res.data.code == 200) {
                this.$message.success('结算成功！')
                this.remitVisible = false
                this.loadList()
              }
              this.remitLoading = false
            })
            .then(res => {
              this.remitLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    /* 查看 */
    view(row) {
      this.remitVisible = true
      this.dialogType = 'view'
      this.remitParam.remark = row.settlement_remark
      this.currUserInfo = row.user_bank_card || {}
      this.currUserInfo.total = row.able_gains
      this.currUserInfo.num = 1
    },

    /**
     * 导出
     * */
    orderExport() {
      let parm = JSON.parse(JSON.stringify(this.param))
      let url = ''
      url +=
        config.SERVER_URL +
        'admin/userordergains/export?token=' +
        Vue.cookie.get('token')
      if (parm.mobile) {
        url += '&mobile=' + parm.mobile
      }
      if (parm.order_code) {
        url += '&order_code=' + parm.order_code
      }
      if (parm.status) {
        url += '&status=' + parm.status
      }
      if (parm.start_date) {
        url += '&start_date=' + parm.start_date
      }
      if (parm.end_date) {
        url += '&end_date=' + parm.end_date
      }
      window.open(url)
    },

    /* 时间选择回调 */
    getSettleTime(e) {
      if (e && e.length > 1) {
        this.param.start_date = e[0]
        this.param.end_date = e[1]
      } else {
        this.param.start_date = ''
        this.param.end_date = ''
      }
    },

    changeType(e) {
      let result = ''
      if (e == 0) {
        result = '一二级分佣'
      } else if (e == 1) {
        result = '282分佣'
      } else if (e == 2) {
        result = '6750礼包分佣'
      } else if (e == 3) {
        result = '差价分佣'
      }
      return result
    }
  }
}
</script>

<style scoped>
.el-flex {
  display: flex;
}

.mt30 {
  margin-top: 30px;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}

.flex_y_center {
  display: flex;
  align-items: center;
}

.flex_bet {
  display: flex;
  justify-content: space-between;
}

.table-info {
  margin-left: 10px;
  width: 65%;
  text-align: left;
}

.table-info .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.table-info .price {
  font-weight: bold;
  color: #333333;
}

.table-info .flex_bet {
  color: #999999;
}

.operator-btn {
  margin-bottom: 20px;
}

.w-50 {
  width: 45%;
}

.num {
  color: #333333;
  font-weight: bold;
}

.price {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
</style>
